<template>
	<view class="evaluate_detail_page">
		
		<view class="flex_box bb1" style="padding: 54rpx 0;">
			<view class="re mr15"><image src="@/static/images/banner_01.png" class="pic_size"></image></view>
			<view class="item ov">
				<view class="df hp100 fldc jcsb">
					<view class="flex_box aic">
						<view class="item ov"><view class="fs28 fwb cor_333 clamp_2">塞尔达 荒野之息</view></view>
					</view>
					<view class="flex_box aic fs24 cor_999">
						<view class="item ov"><view class="clamp_1">裸卡简装，中文，非国行</view></view>
						<!-- <view class="">X1</view> -->
					</view>
					<view class="fs24 cor_999">下单日期：2025-05-12</view>
				</view>
			</view>
		</view>
		
		<view class="pt40 pb40 tac fs36 lh52 fwb cor_000 bb1">您觉得本游戏怎么样？</view>
		
		<view class="pt32 pb32 bb1">
			<view class="fs28 lh40 cor_666 tac">您的总体评价</view>
			<view class="mt10 df aic jcc">
				<up-rate active-color="#F8AD31" inactive-color="#b2b2b2" size="50rpx" gutter="10" v-model="startNum"></up-rate>
			</view>
		</view>
		
		<view class="mt32">
			<view class="fs28 lh40 fwb cor_333">添加详细评价</view>
			<view class="mt20"><textarea class="textarea_01" placeholder="在这里输入评价" placeholder-style="color: #999"></textarea></view>
		</view>
		
		<view class="mt32 df aic">
			<image src="@/static/images/icon_04.png" class="img_3"></image>
			<view class="ml10 fs24 lh32 cor_333">添加照片</view>
		</view>
		
		<view class="operate_area_fix">
			<view class="op_btn_1">取消</view>
			<view class="op_btn_2">提交</view>
		</view>
		
	</view>
	
	
</template>

<script setup>
	
	import {ref, reactive} from 'vue';
	import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
	
	const startNum = ref(4);
	
</script>

<style lang="scss" scoped>
	
	.evaluate_detail_page {
		position: relative;
		min-height: 100vh;
		padding: 18rpx 32rpx;
		padding-bottom: calc(176rpx + content(safe-area-inset-bottom));
		padding-bottom: calc(176rpx + env(safe-area-inset-bottom));
		background: linear-gradient(90deg, #FFEEEE 0%, #fff 90.99%);
		.pic_size {
			position: relative;
			width: 200rpx;
			height: 124rpx;
			border-radius: 16rpx;
			vertical-align: middle;
		}
		.textarea_01 {
			position: relative;
			display: inline-block;
			padding: 24rpx;
			width: 100%;
			height: 204rpx;
			font-size: 24rpx;
			line-height: 32rpx;
			background: #f6f6f6;
			border-radius: 16rpx;
			outline: none;
			border: 0;
		}
		.operate_area_fix {
			position: fixed;
			left: 0;
			bottom: content(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 40rpx;
			z-index: 5;
			.op_btn_1,.op_btn_2 {
				position: relative;
				width: 310rpx;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				font-size: 28rpx;
				border-radius: 8rpx;
			}
			.op_btn_1 {
				color: #333;
				border: 1px solid #333;
			}
			.op_btn_2 {
				color: #fff;
				background-color: #F5220F;
				border: 1px solid #F5220F;
			}
		}
	}

</style>
